// 自定义标准

/*字体规范*/
/*大号*/
$li-maxTitle: 36rpx;

/*标题20-24px Bold 页面主标题、弹窗标题*/
$li-title: 32rpx;

/*副标题16-18px Semi-Bold列表项副标题、表单分组标题*/
$li-subtitle: 28rpx;

/*正文14-16px Regular 列表项描述、表单输入内容*/
$li-mainText: 24rpx;

/*辅助文字 12-14px Regular 表单提示、输入框占位符*/
$li-auxiliaryText: 20rpx;

/*按钮文字	16-18px Medium 主要操作按钮*/
$li-buttonText: 32rpx;


/*间距与边距规范*/
/**使用8px基准网格(间距/边距为8的倍数，如8/16/24/32)。垂直间距通常大于水平间距，增强信息层级。密集场景(如数据表格)可适当缩小至4px间距。*/

/*屏幕边距	16-24px 页面内容与屏幕边缘的间距，以及列表项内部左右边距*/
$li-screenMargins: 32rpx;

/*模块间距	24-32px	表单模块间垂直间距*/
$li-moduleSpacing: 48rpx;

/*元素间距	8-16px	输入框与标签、图标与文字的水平间距*/
$li-spacingOfElements: 16rpx;

/*列表项高度 48-56px 标准列表项高度(含上下内边距)*/
$li-listltemHeight: 96rpx;


/*表单设计规范*/
/**
*标签位置:顶部标签(优于占位符标签，避免输入后消失)。
*必填标记:红色星号(*)在标签后，大小10-12px。
*错误提示:红色文字(12-14px)位于输入框下方，间距4-8px。
*/

/* 输入框样式*/
/*高度48-56dp */
$li-formsHeight: 96rpx;

/*圆角4-8dp(根据产品风格调整)*/
$li-formsRoundedCorner: 8rpx;

/*内边距左右16dp，上下12dp */
$li-formsPadding: 12rpx 16rpx;

/*占位符文字 12-14px，#999999 */
$li-formsPlaceholderLiterals: 24rpx;

/*按钮*/
/*主按钮高度48-56dp，圆角8dp，背景主色，文字白色*/
$li-mainButtonHeight: 96rpx;

/*次要按钮	高度相同，边框1dp主色，透明背景*/
/*$li-secondaryButton: */

/*主色(primaryLv6) -- 按钮、选中状态、关键操作 */
$li-dominantColor: #2196F3;

/*主色系*/
$li-primaryLv1: #E3F2FD;
$li-primaryLv2: #BBDEFB;
$li-primaryLv3: #90CAF9;
$li-primaryLv4: #64B5F6;
$li-primaryLv5: #42A5F5;
$li-primaryLv6: #2196F3;
$li-primaryLv7: #1E88E5;
$li-primaryLv8: #1976D2;
$li-primaryLv9: #1565C0;
$li-primaryLv10: #0D47A1;

/** 辅助色 -- 成功状态，次要按钮*/
/* 1级色 绿 -- 背景色 */
$li-successLv1: #dff0d8;
/* 2级色 绿 -- 列表点击‘hover’，‘active’的颜色,列表背景 */
$li-successLv2: #c1e2b3;
/* 3级色 绿 -- 按钮色 */
$li-successLv3: #5cb85c;
/* 4级色 绿 -- 鲜艳 */
$li-successLv4: #449d44;

/** 警告色 -- 警告提示，非阻塞性错误*/
/* 1级色 黄 -- 背景色 */
$li-warningLv1: #fcf8e3;
/* 2级色 黄 -- 列表点击‘hover’，‘active’的颜色,列表背景 */
$li-warningLv2: #f7ecb5;
/* 3级色 黄 -- 按钮色 */
$li-warningLv3: #f0ad4e;
/* 4级色 黄 -- 鲜艳 */
$li-warningLv4: #ec971f;

/** 错误色 -- 错误提示，删除操作*/
/* 1级色 红 -- 背景色 */
$li-dangerLv1: #f2dede;
/* 2级色 红 -- 列表点击‘hover’，‘active’的颜色,列表背景 */
$li-dangerLv2: #e4b9b9;
/* 3级色 红 -- 按钮色 */
$li-dangerLv3: #eb0909;
/* 4级色 红 -- 鲜艳 */
$li-dangerLv4: #c9302c;

/*次级添加色 -- 用于需要更多的非错误色*/
/*1级色青--背景色*/
$li-infoLv1: #d9edf7;
/*2级色 青 -- 列表点击‘hover’， ‘active’的颜色,列表背景*/
$li-infoLv2: #afd9ee;
/*3级色青--按钮色*/
$li-infoLv3: #5bc0de;
/*4级色青--鲜艳*/
$li-infoLv4: #31b0d5;

/*深黑 --标题、正文文字*/
/*$li-darkblack: #333333;*/
$li-darkblack: #000000;

/*文本黑 -- 比深黑字体略浅导航色一般性主标题*/
$li-textBlack: #363636;

/*深灰 -- 副标题、辅助文字*/
$li-darkGrey: #666666;

/*浅灰-- 次要,备注文字色*/
$li-minorGrey: #aaaaaa;

/*文本灰--比引用背景色深比导航色浅副一级文字色*/
$li-textGrey: #8c8d8f;

/*银灰 --禁用状态文字*/
$li-disableGrey: #999999;

/*背景灰--页面背景色*/
/* $li-backGrey: #f6f7f9; */
$li-backGrey: #f1f1f1;

/*点击灰 -- active点击颜色*/
$li-activeGrey: #f1f2f4;

/*线灰--分割线*/
$li-lineGrey: #f2f2f2;

/*段落灰 --引用背景灰色 段落背景灰*/
$li-sectionGrey: #e8e8e8;

/*其它色系*/
/*禁用色:禁用色*/
$li-disable: #EFF3F8;

/* 白色*/
$li-white: #ffffff;

:deep(.nut-price) {
    color: $li-dominantColor !important;
    font-size: $li-maxTitle !important;
}

page {
    letter-spacing: 3rpx;
    font-size: 28rpx;
    color: $li-darkblack;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    /*行高建议为字体大小的1.2~1.5倍(如16px文字行高20px)。*/
}

.li-bg {
    z-index: -1;
    position: fixed;
    height: 600rpx;
    width: 100%;
    background-image: linear-gradient(to bottom, #e3f2fd 0%, $li-backGrey 100%);
}

.li-bg-s {
    z-index: -1;
    width: 600rpx;
    height: 600rpx;
    border-radius: 50%;
    position: fixed;
    right: -150rpx;
    top: -300rpx;
    background-image: linear-gradient(to bottom, rgba(241, 241, 241, 0) 40%, rgba(241, 241, 241, 1) 100%), linear-gradient(to left, #e3f2fd 0%, #90caf9 100%);
}

.li-bg-l {
    z-index: -1;
    width: 800rpx;
    height: 800rpx;
    border-radius: 550rpx;
    position: fixed;
    left: -200rpx;
    top: -300rpx;
    background-image: linear-gradient(to bottom, rgba(241, 241, 241, 0) 40%, rgba(241, 241, 241, 1) 100%), linear-gradient(to right, #e3f2fd 0%, #90caf9c4 100%);
}

.shadow-blur {
    &::before {
        content: "";
        display: block;
        background: inherit;
        filter: blur(20rpx);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 20rpx;
        left: 20rpx;
        z-index: -1;
        opacity: 0.6;
        transform-origin: 0 0;
        border-radius: inherit;
        transform: scale(1, 1);
    }
}

.shadow {
    box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
}

.shake_o {
    &:active {
        opacity: 0.7;
    }
}

.shake_c {
    &:active {
        background-color: $li-activeGrey;
    }
}

.b-c0 {
    border-top-left-radius: 25rpx;
    border-top-right-radius: 25rpx;
    background-image: linear-gradient(to right, $li-successLv1 0%, #dff0d83b 100%);
}

.c0 {
    color: $li-successLv3;
    background: $li-successLv1;
}

.b-c1 {
    border-top-left-radius: 25rpx;
    border-top-right-radius: 25rpx;
    background-image: linear-gradient(to right, $li-primaryLv1 0%, #e3f2fd3b 100%);
}

.c1 {
    color: $li-primaryLv6;
    background: $li-primaryLv1;
}

.b-c2 {
    border-top-left-radius: 25rpx;
    border-top-right-radius: 25rpx;
    background-image: linear-gradient(to right, $li-dangerLv1 0%, #f2dede3b 100%);
}

.c2 {
    color: $li-dangerLv3;
    background: $li-dangerLv1;
}

.b-c3 {
    border-top-left-radius: 25rpx;
    border-top-right-radius: 25rpx;
    background-image: linear-gradient(to right, $li-warningLv1 0%, #f0ad4e3b 100%);
}

.c3 {
    color: $li-warningLv3;
    background: $li-warningLv1;
}

.dt-p1 {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-image: linear-gradient(to right, $li-primaryLv1 0%, #e3f2fd3b 100%);
}

.p1 {
    color: $li-primaryLv6;
    // background: $li-primaryLv6;
}

/* 自定义头部搜索弹框 */
.li-popup {
    .popup-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .popup-mask-show {
        pointer-events: all;
        opacity: 1;
    }

    .popup-container {
        position: fixed;
        top: -100%;
        left: 0;
        z-index: 1001;
        width: 100%;
        transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);

        .popup-content {
            background: $li-white;
            // border-radius: 0 0 16px 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

            .popup-body {
                // padding: 10px 0;
            }
        }
    }

    .popup-container-show {
        top: 0;
    }
}

/** 自定义头部搜索弹框 end */

/* 搜索栏 */
.li-searchBar {
    width: 100%;
    height: 110rpx;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: $li-white;
    z-index: 999;

    .li-rantangle {
        width: 100%;
        font-size: $li-subtitle;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        justify-content: center;
        height: 90rpx;

        .li-btnleft {
            width: 140rpx;
            border-radius: $li-formsRoundedCorner;
            transition: width 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(-59deg, transparent 21px, #f1f1f1 0) top right;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: 1;

            .li-texts {
                margin-right: 40rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 10px;
            }
        }

        .li-btnright {
            width: 600rpx;
            border-radius: $li-formsRoundedCorner;
            color: $li-white;
            transition: width 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(120deg, transparent 21px, $li-dominantColor 0) top left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: -15px;
            position: relative;
            padding-left: 20rpx;
        }

        .li-ritactive {
            width: 140rpx;
        }

        .li-lftactive {
            width: 600rpx;
        }

        .li-butStyle:active {
            opacity: 0.7;
        }
    }
}

/* 搜索栏 end */

/* 搜索栏按钮组 */
.li-searchBar-btn {
    height: 100rpx;
    padding: 5px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -6rpx 10rpx rgba(0, 0, 0, 0.1);

    .li-cz {
        flex: 1;
        height: 80rpx;
        border: 4rpx solid $li-lineGrey;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .li-xz {
        flex: 1;
        height: 80rpx;
        color: $li-white;
        border: 4rpx solid $li-lineGrey;
        border-radius: 50rpx;
        background-color: $li-dominantColor;
        // background-image: linear-gradient(to left, #80dff0 0%, #21bfdc 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
    }

    .li-ss {
        flex: 2;
        height: 80rpx;
        color: $li-white;
        border: 4rpx solid $li-lineGrey;
        border-radius: 50rpx;
        background-color: $li-dominantColor;
        // background-image: linear-gradient(to left, #80dff0 0%, #21bfdc 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
    }
}

/* 搜索栏按钮组 end */

/* 常规卡片列表 */
.li-card-item {
    width: 710rpx;
    background: $li-white;
    border-radius: 25rpx;
    margin-bottom: $li-screenMargins;

    .content-box1 {
        height: 120rpx;
        padding: 0 $li-screenMargins;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cb-lft {
            display: flex;
            align-items: center;

            .first {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 80rpx;
                width: 80rpx;
                color: $li-white;
                background: $li-dominantColor;
                border-radius: 15rpx;
                font-size: 40rpx;
            }

            .info {
                margin-left: $li-spacingOfElements;

                .name {
                    color: $li-darkblack;
                    font-size: $li-title;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: calc(690rpx - $li-screenMargins - $li-screenMargins - 80rpx - $li-spacingOfElements - 120rpx);
                    font-weight: bold;
                }

                .id {
                    color: $li-textGrey;
                    font-size: $li-mainText;
                    margin-top: 10rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 320rpx;
                }
            }
        }

        .cb-rit {
            padding: 8rpx 12rpx;
            border-radius: $li-formsRoundedCorner;
            font-size: $li-mainText;
        }
    }

    .content-box2 {
        .item {
            padding: 0 $li-screenMargins;
            margin-top: 20rpx;
            margin-bottom: 15rpx;
            display: flex;

            .lable {
                color: $li-textGrey;
                width: 150rpx;
                min-width: 150rpx;
            }

            .name {
                color: $li-darkblack;
                margin-left: 10rpx;
                word-break: break-all;
            }
        }
    }

    .content-btn {
        // min-height: 100rpx;
        padding: 10rpx $li-screenMargins;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;

        .c-btn {
            padding: 12rpx 25rpx;
            border-radius: $li-formsRoundedCorner;
            font-size: $li-subtitle;
            color: $li-white;
            margin: 10rpx 0 10rpx 15rpx;
        }
    }

    .content-bot {
        height: 80rpx;
        padding: 0 $li-screenMargins;
        border-top: 1rpx solid $li-lineGrey;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cbt-lft {
            color: $li-textGrey;
        }

        .cbt-rit {
            color: $li-dominantColor;
            display: flex;
            align-items: center;
        }
    }
}

/* 常规卡片列表 end */

/* 常规金额列表 */
.li-price-item {
    width: 670rpx;
    background: $li-white;
    border-radius: 25rpx;
    margin-bottom: 32rpx;
    padding: 20rpx;

    .li-head {
        padding-left: 15rpx;

        .li-head-title {
            color: $li-darkblack;
            font-size: $li-title;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .head-title-right {
                font-size: $li-maxTitle;
                font-weight: normal;
                color: $li-dominantColor;
            }
        }

        .li-head-sub {
            color: $li-textGrey;
            font-size: $li-mainText;
            margin-top: 10rpx;
        }
    }

    .li-data {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: 150rpx;
        border-radius: 25rpx;
        margin-top: 15rpx;
        background-image: linear-gradient(to bottom, #e3f2fd 0%,
                #e3f2fd3b 50%);

        .li-data-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .item-name {
                color: $li-textGrey;
                font-size: 26rpx;
                // margin-bottom: 10r
                display: flex;
                align-items: flex-end;
                height: 60rpx;
            }

            .item-price {
                color: $li-darkblack;
                font-size: $li-maxTitle;
                // margin-top: 10rpx;
                display: flex;
                align-items: center;
                height: 90rpx;
            }
        }
    }
}

/* 常规金额列表 end */

/* 常规账单列表 */
.list-box {
    width: 680rpx;
    padding: 15rpx;
    background-color: $li-white;
    border-radius: 15rpx;
    box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
    margin-bottom: 32rpx;

    .li-bill-item {
        height: 150rpx;
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;
        position: relative;
        // border-bottom: 1rpx solid $li-lineGrey;

        .li-bill-lft {
            width: 120rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .money-icon {
                height: 90rpx;
                width: 90rpx;
                border-radius: 50rpx;
                font-size: 60rpx;
                color: $li-warningLv4;
            }
        }

        .li-bill-cen {
            width: 310rpx;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            margin-left: 10rpx;

            .li-bill-cen-title {
                color: $li-darkblack;
                font-size: $li-title;
                font-weight: bold;
            }

            .li-bill-cen-sub {
                color: $li-textGrey;
                font-size: $li-subtitle;
                margin-top: 10rpx;
            }
        }

        .li-bill-rit {
            width: 250rpx;
            text-align: right;
            margin-right: 20rpx;
            font-size: $li-maxTitle;
            font-weight: bold;
        }

        &::after {
            content: '';
            display: block;
            height: 1rpx;
            background: $li-lineGrey;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 35rpx;
        }

        &:last-child::after {
            content: none;
        }
    }
}

/* 常规账单列表 end */

/* 首页 */
.li-home {

    /* 通用户栏样式 */
    &-user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 $li-screenMargins;

        &-lft {
            display: flex;
            align-items: center;
        }

        &-rit {
            height: 100%;
            width: 80rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: $li-mainText;
            color: $li-darkblack;

            &-refresh {
                &:hover {
                    animation: refresh 0.4s linear 4;
                }
            }

            @keyframes refresh {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }

        }
    }

    /* 轮播栏样式 */
    &-swiper {
        width: calc(750rpx - $li-screenMargins - $li-screenMargins);
        height: 291rpx;
        margin: 15rpx 0 30rpx $li-screenMargins;
    }

    /* 通告栏样式 */
    &-notice {
        background-color: $li-primaryLv1;
        // background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        width: calc(750rpx - $li-screenMargins - $li-screenMargins - 40rpx);
        margin-left: $li-screenMargins;
        border-radius: 12px;
        padding: 12rpx 20rpx;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        margin-bottom: 20rpx;

        &-icon {
            color: $li-primaryLv6;
            font-size: $li-title;
            margin-right: $li-screenMargins;
            flex-shrink: 0;
        }

        &-content {
            flex-grow: 1;
            overflow: hidden;
            position: relative;
            height: 56rpx;
            line-height: 56rpx;

            &-scroll {
                position: absolute;
                white-space: nowrap;
                display: inline-block;
                animation: scroll 25s linear infinite;
                padding-left: 100%;

                &-item {
                    display: inline-block;
                    margin-right: 100rpx;
                    font-size: $li-subtitle;
                    color: $li-primaryLv6;
                    font-weight: 500;
                }
            }

            @keyframes scroll {
                0% {
                    transform: translateX(0%);
                }

                100% {
                    transform: translateX(-100%);
                }
            }
        }
    }

    /* 数据面板样式 */
    &-dataPanel {
        background-color: $li-white;
        width: calc(750rpx - $li-screenMargins - $li-screenMargins);
        margin-left: $li-screenMargins;
        border-radius: 12rpx;
        margin-bottom: 20rpx;

        // margin-top: 150rpx;

        &-header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 100rpx;
            font-size: $li-title;
            color: $li-darkblack;
            padding: 0 $li-screenMargins;

            &-icon {}

            &-text {
                margin-left: 20rpx;
            }
        }

        &-card {
            padding: $li-screenMargins;
            display: flex;
            flex-wrap: wrap;

            &-item {
                width: 310.5rpx;
                height: 160rpx;
                display: flex;
                align-items: center;

                &-icon {
                    width: 80rpx;
                    height: 80rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 15rpx;

                    &-img {
                        font-size: 40rpx;
                    }
                }

                &-info {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;
                    margin-left: 20rpx;

                    &-name {
                        font-size: $li-mainText;
                        color: $li-textGrey;
                        margin-top: 15rpx;
                    }

                    &-price {
                        font-size: 40rpx;
                        font-weight: bold;
                        color: $li-darkblack;
                    }
                }

                .lhdc-s {
                    color: $li-successLv3;
                }

                .lhdc-p {
                    color: $li-dominantColor;
                }

                .lhdc-d {
                    color: $li-dangerLv3;
                }
            }

            // &-item:nth-child(even) {
            //     justify-content: flex-end;
            // }

        }
    }

    &-btns {
        background-color: $li-white;
        width: calc(750rpx - $li-screenMargins - $li-screenMargins);
        margin-left: $li-screenMargins;
        border-radius: 12rpx;
        margin-bottom: 20rpx;

        &-iBox {
            background-color: $li-sectionGrey;
            // background-color: #31b0d5;
            height: 75rpx;
            width: 75rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50rpx;
            // border-radius: 18rpx;

            &-icon {
                color: $li-darkblack;
                font-size: 32rpx;
                // font-size: 34rpx;
            }
        }


    }

}

/* 首页 end */

/* 个人中心 */
.li-user {
    &-info {
        width: 100%;
        height: 180rpx;
        display: flex;
        align-items: center;
        padding: 0 $li-screenMargins;
        margin-bottom: $li-screenMargins;
        // justify-content: center;

        &-icon {
            height: 110rpx;
            width: 110rpx;
            border-radius: 50rpx;
            background-color: $li-sectionGrey;
            display: flex;
            align-items: center;
            justify-content: center;

            &-tx {
                height: 110rpx;
                width: 110rpx;
                border-radius: 60rpx;
            }
        }

        &-con {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            margin-left: 30rpx;

            &-name {
                color: $li-darkblack;
                font-size: $li-title;
            }

            &-role {
                color: $li-textGrey;
                font-size: $li-subtitle;
                margin-top: 10rpx;
            }
        }
    }

    &-btns {
        background-color: $li-white;
        width: calc(750rpx - $li-screenMargins - $li-screenMargins);
        margin-left: $li-screenMargins;
        border-radius: 12rpx;
        margin-bottom: 20rpx;

        &-iBox {
            background-color: $li-sectionGrey;
            // background-color: #31b0d5;
            height: 75rpx;
            width: 75rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50rpx;

            &-icon {
                color: $li-darkblack;
                font-size: 32rpx;
            }
        }


    }

    &-list {
        background-color: $li-white;
        width: calc(750rpx - $li-screenMargins - $li-screenMargins);
        margin-left: $li-screenMargins;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
    }
}

/* 个人中心 end */

.li-cell-box {
    height: 100rpx;
    display: flex;
    align-items: center;
}

.li-cell-box-not {
    display: flex;
    align-items: center;
}

.li-cell-box-radio {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;

}

.li-cell-bot {
    height: 100rpx;
    padding: 10rpx $li-screenMargins !important;
    position: fixed !important;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    left: 0;
    box-shadow: 0 -6rpx 10rpx rgba(0, 0, 0, 0.1) !important;

    &-cz {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1rpx solid $li-lineGrey;
        width: 216rpx;
        height: 80rpx;
        border-radius: 50rpx;
        color: $li-darkblack;
    }

    &-qr {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 450rpx;
        height: 80rpx;
        border-radius: 50rpx;
        color: $li-white;
        background-color: $li-primaryLv6;
    }
}

.li-btns {
    width: 100%;
    // margin-left: $li-screenMargins;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;

    &-lft {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1rpx solid $li-lineGrey;
        width: 216rpx;
        height: 80rpx;
        border-radius: 50rpx;
        color: $li-darkblack;
        background-color: #ffffff;
    }

    &-rit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 450rpx;
        height: 80rpx;
        border-radius: 50rpx;
        color: $li-white;
        background-color: $li-primaryLv6;
    }
}

.li-btn-tj {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    border-radius: 50rpx;
    color: $li-white;
    background-color: $li-primaryLv6;
}

.li-btn-tj-not {
    color: $li-darkblack;
    background-color: #ebebeb;
}

.displayPwd {
    height: 1rpx !important;
    width: 1rpx !important;
    min-height: 1rpx !important;
    border-bottom: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}


.float-box {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    bottom: 130rpx;
    right: 55rpx;
    background-color: $li-warningLv2;
    color: $li-warningLv4;
    z-index: 999;
}

// 悬浮按钮
.movable-area {
    // 保持在右下角
    margin-top: 120rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;
    height: calc(100vh - 250rpx);
    width: calc(100vw - 100rpx);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 999;
    pointer-events: none; //此处要加，鼠标事件可以渗透

    .movable-view {
        width: 120rpx;
        height: 120rpx;
        pointer-events: auto; //恢复鼠标事件

        .newProblem {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: $li-warningLv2;
            color: $li-warningLv4;
        }
    }
}

// 首页列表
.li-home-list {
    &-item {
        width: calc(750rpx - $li-screenMargins - $li-screenMargins);
        height: 220rpx;
        margin-left: $li-screenMargins;
        border-radius: 15rpx;
        background-color: $li-white;
        margin-bottom: $li-screenMargins;
        position: relative;
        box-shadow: 0 6rpx 6rpx 6rpx rgba(232, 232, 232, 0.2);
        margin-top: 15rpx;

        &-text {
            height: 220rpx;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            padding: 0 $li-screenMargins;

            &-title {
                color: $li-darkblack;
                font-size: $li-maxTitle;
                font-weight: bold;
            }

            &-desc {
                color: $li-darkGrey;
                font-size: $li-title;
                margin-top: 8rpx;
            }
        }

        &-icon {
            position: absolute;
            right: 40rpx;
            // top: -40rpx;
            top: 20rpx;

            &-img {
                // width: 270rpx;
                width: 180rpx;
                height: auto;
            }
        }
    }
}

// 码牌交易统计信息

.li-mpdata-info {
    // height: 80rpx;
    width: 100%;
    // background-color: $li-white;
    // border-radius: 8rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-nthchild {
        margin: 0 20rpx;
    }

    &-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 1;
        height: 90rpx;
        padding: 20rpx;
        background-color: $li-primaryLv1;
        border-radius: 8rpx;

        &-num {
            font-size: 36rpx;
            font-weight: bold;
            color: $li-primaryLv6;
        }

        &-name {
            font-size: $li-subtitle;
            color: $li-primaryLv6;
        }
    }
}


// 登录加载
.li-loader {
    width: 30px;
    aspect-ratio: 1;
    display: grid;
    -webkit-mask: conic-gradient(from 15deg, #0000, #000);
    animation: l26 1s infinite steps(12);
}

.li-loader,
.li-loader:before,
.li-loader:after {
    background:
        radial-gradient(closest-side at 50% 12.5%,
            #2196F3 96%, #0000) 50% 0/20% 80% repeat-y,
        radial-gradient(closest-side at 12.5% 50%,
            #2196F3 96%, #0000) 0 50%/80% 20% repeat-x;
}

.li-loader:before,
.li-loader:after {
    content: "";
    grid-area: 1/1;
    transform: rotate(30deg);
}

.li-loader:after {
    transform: rotate(60deg);
    background-color: #5a4ba2;
}

@keyframes l26 {
    100% {
        transform: rotate(1turn)
    }
}


.show-password {
  font-size: 16px;
  color: #d7dee3;
  cursor: pointer;
  user-select: none;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
